<template>
    <view class="container">
        <header-bar :config="config" @rightClick="rightClick"></header-bar>
        <tab-bar :tabs="tabs" @clickTab="clickTab" :tabIndex="tabIndex" lineWidth="" background="none"></tab-bar>
        <view class="main">
            <swiper v-if="loadOk" class="swiper" :style="{ height: listHeight }" :current="0" @change="swiperChange">
                <!-- <swiper-item v-for="(item,index) in tabs" :key="item.title"> -->
                <swiper-item>
                    <choose-date
                        ref="chooseDatePanel"
                        :startDate="startDate"
                        :endDate="endDate"
                        v-if="tabIndex == 4"
                        @selDate="selDate"></choose-date>
                    <view class="total-info">
                        <view class="total">共有{{ waitTotal }}笔 合计</view>
                        <view class="sum">¥{{ costStatistics.Total }}</view>
                    </view>
                    <view class="cost-info">
                        <view class="title"> 费用明细 </view>
                    </view>
                    <cost-list
                        ref="costList"
                        :total="costStatistics.Total"
                        :height="sublistHeight"
                        @totalBack="waitTotalBack"></cost-list>
                </swiper-item>
            </swiper>
        </view>
    </view>
</template>

<script>
import utils from "@/utils/utils.js"
import { getCostStatistics, getCostDetailPage } from "@/service/api/erp.js"
import { getElementHeight } from "@/uni-sub-base/utils/elementUtil.js"
import tabBar from "@/components/common/tab-bar.vue"
import chooseDate from "../components/choose-date.vue"
import costList from "./cost-list.vue"
export default {
    components: {
        tabBar,
        chooseDate,
        costList,
    },
    data() {
        return {
            config: {
                title: "费用",
                centerSlot: true,
                rightSlot: false,
                color: ["#333333"],
                statusBarFontColor: "#ffffff",
                rightBtns: [
                    {
                        id: 1,
                        type: "scan",
                    },
                ],
            },
            listHeight: "",
            sublistHeight: "",
            loadOk: true,
            tabIndex: 0,
            tabs: [
                // {
                // 	title: "全部"
                // },
                {
                    title: "今日",
                },
                {
                    title: "本周",
                },
                {
                    title: "本月",
                },
                {
                    title: "本年",
                },
                {
                    title: "自定义",
                },
            ],
            waitTotal: 0,
            total: 0,
            searchForm: {
                startDate: utils.today().startDate,
                endDate: utils.today().endDate,
            },
            datas: [],
            costStatistics: {},
            startDate: "",
            endDate: "",
        }
    },
    onLoad(options) {
        if (options.tabIndex) {
            this.tabIndex = Number(options.tabIndex)
        }
        if (this.tabIndex == 0) {
            // 今日
            this.searchForm.startDate = utils.today().startDate
            this.searchForm.endDate = utils.today().endDate
        } else if (this.tabIndex == 1) {
            // 本周
            this.searchForm.startDate = utils.thisWeek().startDate
            this.searchForm.endDate = utils.thisWeek().endDate
        } else if (this.tabIndex == 2) {
            // 本月
            this.searchForm.startDate = utils.thisMonth().startDate
            this.searchForm.endDate = utils.thisMonth().endDate
        } else if (this.tabIndex == 3) {
            // 本年
            this.searchForm.startDate = utils.thisYear().startDate
            this.searchForm.endDate = utils.thisYear().endDate
        } else if (this.tabIndex == 4) {
            if (options.startDate) {
                this.searchForm.startDate = options.startDate
                this.startDate = options.startDate
            }
            if (options.endDate) {
                this.searchForm.endDate = options.endDate
                this.endDate = options.endDate
            }
            // this.searchForm.startDate = ''
            // this.searchForm.endDate = ''
            // this.$nextTick(() => {
            // 	this.$refs.chooseDatePanel.openStarDate()
            // })
        }
    },
    created() {
        // let mainColor = this.easyGetColor('white')
        this.config.backgroundColor = [1, "#F7F7F7"]
    },
    mounted() {
        this.getListHeight()
        setTimeout(() => {
            if (this.$refs.costList) {
                this.$refs.costList.refresh(this.searchForm)
            }
        }, 300)
    },
    onShow() {
        this.init()
    },
    methods: {
        init() {
            getCostStatistics(this.searchForm).then((res) => {
                if (res.State == 1) {
                    this.costStatistics = res.Data
                }
            })
        },
        getListHeight() {
            //获取商品高度
            getElementHeight(this, ".main", (e) => {
                this.listHeight = e + "px"
                this.sublistHeight = e - uni.upx2px(320) + "px"
                this.loadOk = true
            })
        },
        swiperChange(e) {
            let tabIndex = e.detail.current
            this.clickTab(tabIndex)
        },
        //tab切换
        clickTab(index) {
            if (this.tabIndex != index || index == 4) {
                clearTimeout(this.timer)
                this.timer = setTimeout((time) => {
                    this.tabIndex = index
                    this.upTab()
                    if (this.tabIndex == 0) {
                        // 今日
                        this.searchForm.startDate = utils.today().startDate
                        this.searchForm.endDate = utils.today().endDate
                    } else if (this.tabIndex == 1) {
                        // 本周
                        this.searchForm.startDate = utils.thisWeek().startDate
                        this.searchForm.endDate = utils.thisWeek().endDate
                    } else if (this.tabIndex == 2) {
                        // 本月
                        this.searchForm.startDate = utils.thisMonth().startDate
                        this.searchForm.endDate = utils.thisMonth().endDate
                    } else if (this.tabIndex == 3) {
                        // 本年
                        this.searchForm.startDate = utils.thisYear().startDate
                        this.searchForm.endDate = utils.thisYear().endDate
                    } else if (this.tabIndex == 4) {
                        this.costStatistics = {}
                        this.searchForm.startDate = this.startDate
                        this.searchForm.endDate = this.endDate
                        this.$nextTick(() => {
                            this.$refs.chooseDatePanel.openStarDate()
                        })
                    }
                    this.init()
                    this.$refs.costList.refresh(this.searchForm)
                    // if(this.tabIndex != 4){
                    //     this.init()
                    // 	this.$refs.costList.refresh(this.searchForm)
                    // }
                }, 20)
            }
        },
        selDate(e) {
            let dateArr = e.split(",")
            this.searchForm.startDate = dateArr[0]
            this.searchForm.endDate = dateArr.length > 1 ? dateArr[1] : dateArr[0]
            this.startDate = this.searchForm.startDate
            this.endDate = this.searchForm.endDate
            this.init()
            this.$refs.costList.refresh(this.searchForm)
        },
        upTab() {
            this.$forceUpdate()
        },
        waitTotalBack(e) {
            this.waitTotal = e
        },
    },
}
</script>

<style lang="scss">
/deep/.tabs {
    position: relative;
    &:after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 1px;
        width: 100%;
        height: 1px;
        background: #ebebeb;
    }
}
.total-info {
    padding: 38rpx $app-page-padding;
    .total {
        font-size: $size-28;
        color: $color-gray-3;
        padding-bottom: 24rpx;
    }
    .sum {
        font-size: $size-40;
    }
}
.cost-info {
    background: $color-white;
    border-top-left-radius: 24rpx;
    border-top-right-radius: 24rpx;
    padding: 0 $app-page-padding;
    margin: 0 $app-page-padding 0;
    .title {
        font-size: $size-32;
        font-weight: bold;
        padding: 40rpx 0;
    }
}
</style>
